<template>
  <div>
    <el-form :model="form" :rules="rules" ref="formRef">
      <el-form-item label="储值卡名称" prop="name" :label-width="formLabelWidth">
        <el-input placeholder="请输入名称" v-model="form.name" style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="储值卡类型" prop="type" :label-width="formLabelWidth">
        <el-select v-model="form.type" placeholder="请选择" @change="selectChange">
          <el-option
            v-for="item in productOptions"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司名称" prop="enterpriseName" :label-width="formLabelWidth" v-if="show">
        <el-input placeholder="请输入名称" v-model="form.enterpriseName" style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="储值卡发放数量" prop="cardStock" :label-width="formLabelWidth">
        <el-input-number
          v-model="form.cardStock"
          :min="0"
          :precision="0"
          :step="1"
          :controls="false"
        ></el-input-number>
        <span style="margin-left:10px">张</span>
      </el-form-item>
      <el-form-item label="储值卡卡号标头" prop="cardTitle" :label-width="formLabelWidth">
        <el-input placeholder="请输入大写英文字母" v-model="form.cardTitle" style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="储值卡面值" prop="money" :label-width="formLabelWidth">
        <el-input-number v-model="form.money" :min="0" :precision="0" :step="1" :controls="false"></el-input-number>
        <span style="margin-left:10px">元</span>
      </el-form-item>
      <el-form-item label="储值卡有效期" prop="createdateList" :label-width="formLabelWidth">
        <el-date-picker
          v-model="form.createdateList"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="储值卡备注" prop="remark" :label-width="formLabelWidth">
        <el-input type="textarea" :rows="3" placeholder="请填写备注" v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-button plain @click="resetForm('formRef')">取消</el-button>
        <el-button type="primary" @click="submitForm('formRef')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      show: false,
      productOptions: [
        { id: "1", title: "赠送" },
        { id: "2", title: "企业购买" }
      ],
      form: {
        name: "",
        type: "",
        cardStock: "",
        cardTitle: "",
        money: "",
        createdateList: [],
        remark: "",
        enterpriseName: "",
        userId: this.Global.user.userId
      },
      formLabelWidth: "130px",
      rules: {
        type: [
          { required: true, message: "请选择储值卡类型", trigger: "change" }
        ],
        cardStock: [
          { required: true, message: "请填写储值卡发放数量", trigger: "blur" }
        ],
        cardTitle: [
          { required: true, message: "请填写储值卡卡号标头", trigger: "blur" }
        ],
        money: [
          { required: true, message: "请填写储值卡面值", trigger: "blur" }
        ],
        createdateList: [
          { required: true, message: "请选择储值卡有效期", trigger: "blur" }
        ],
        remark: [
          { required: true, message: "请填写储值卡备注", trigger: "blur" }
        ],
        enterpriseName: [
          { required: true, message: "请填写公司名称", trigger: "blur" }
        ]
      }
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {},
  methods: {
    selectChange(e) {
      if (e == "1") {
        this.show = false;
      } else {
        this.show = true;
      }
    },
    resetForm(formName) {
      this.$emit("submit", false);
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var param = {
            name: this.form.name,
            type:this.form.type,
            cardStock:this.form.cardStock,
            cardTitle: this.form.cardTitle,
            money:this.form.money,
            startDate: this.form.createdateList[0],
            endDate:this.form.createdateList[1],
            remark:this.form.remark,
            enterpriseName: this.form.enterpriseName,
            userId: this.form.userId
          };
          this.$service.AddStoredCard(param).then(res => {
            if (res.code == "00000") {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.$refs[formName].resetFields();
              this.$emit("submit", false);
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
        }
      });
    }
  },
  watch: {}
};
</script>
<style scoped>
</style>
